import React from 'react'
import PropTypes from 'prop-types'
import {Form, Input, Row, Col, Modal, message} from 'antd'

const FormItem = Form.Item

const formItemLayout = {
  labelCol: {span: 4},
  wrapperCol: {span: 20},
}

const modal = ({
                 onOk,
                 selectRecord,
                 form: {
                   getFieldDecorator,
                   validateFields,
                   getFieldsValue,
                 },
                 ...resetPasswordModalProps
               }) => {
  const handleOk = () => {
    validateFields((errors) => {
      if (errors) {
        return
      }
      const data = {
        ...getFieldsValue(),
        id: selectRecord.id,
      }
      const {password, repassword} = data
      if (password !== repassword) {
        message.warn("两次输入的密码不一致")
        return
      }
      onOk(data)
    })
  }

  const modalOpts = {
    ...resetPasswordModalProps,
    onOk: handleOk,
  }

  return (
    <Modal {...modalOpts}>
      <Form layout="horizontal">
        <Row gutter={{md: 12, lg: 24, xl: 48}}>
          <Col md={24} sm={24}>
            <FormItem {...formItemLayout} label="新密码">
              {getFieldDecorator('password', {
                rules: [{required: true, message: '请输入登录密码'}],
              })(<Input type="password" placeholder="新密码"/>)}
            </FormItem>
          </Col>
        </Row>
        <Row gutter={{md: 12, lg: 24, xl: 48}}>
          <Col md={24} sm={24}>
            <FormItem {...formItemLayout} label="确认密码">
              {getFieldDecorator('repassword', {
                rules: [{required: true, message: '请输入确认密码'}],
              })(<Input type="password" placeholder="确认密码"/>)}
            </FormItem>
          </Col>
        </Row>
      </Form>
    </Modal>
  )
}

modal.propTypes = {
  form: PropTypes.object.isRequired,
  type: PropTypes.string,
  selectRecord: PropTypes.object,
  onOk: PropTypes.func,
}

export default Form.create()(modal)
